005-读书笔记-Vue官网 自定义指令

1.自定义指令的使用

在组件中定义一个自定义指令，作用：将当前DOM节点中字体颜色设置为红色。

在自定义指令中简化了钩子函数，下面的钩子函数相当于 bind 和 unbind 的缩写：

<script>
  export default {
    name: 'app',
    directives: {
      setRed: function (el, binding) { // 自定义一个指令，使用的时候 v-set-red
        el.style.color = 'red'
      }
    }
  }

</script>

在页面结构中，通过 v-set-red 来使用上面自定义的指令：

<template>
  <div id="app">
    <div v-set-red>这是一个div标签</div>
  </div>
</template>

2.认识自定义指令的钩子函数

自定义指令也是存在生命周期的，也存在生命周期钩子。

在实际使用的时候，一般只关注三个钩子函数：

• 绑定时调用的钩子 bind
• 被绑定元素插入父节点时调用的钩子 inserted
• 解绑时调用的钩子 unbind

<script>
  export default {
    name: 'app',
    directives: {
      setRed: {
        bind() {
          console.log('执行一次的初始化动作...')
        },
        inserted() {
          console.log('被绑定元素插入父节点时调用...')
        },
        unbind() {
          console.log('与元素解绑时调用...')
        }
      }
    }
  }

</script>

在实际调用的时候，bind和inserted都会调用，而unbind只有在页面热刷新(即在vue-cli中增加或删除节点)的时候才会调用。

钩子函数的参数可以参照官网的内容：自定义指令

3.钩子函数参数el

• el 当前的DOM节点
• el.style 当前节点的样式，如el.style.width
• el.dataset 当前节点的自定义属性，如data-test="123"

<template>
  <div id="app">
    <input v-set-red type="text" value="内容" data-test="wang" style="width:100%">
  </div>
</template>

<script>
  export default {
    directives: {
      setRed: function (el, binding) { // 自定义一个指令，使用的时候 v-set-red
        el.style.color = 'red'
        console.log(el, el.type, el.value, el.dataset.test, el.style.width)
      }
    }
  }

</script>

输出的结果：

<input v-set-red type="text" value="内容" data-test="wang" style="width:100%"> "text" "内容" "wang" "100%"

可以看出 el el.value el.dataset.test el.style.width 分别输出的内容是什么。

4.参考内容

• 自定义指令